<template>
  <div>
    <div class="yhbox">
        <div class="yonghutop">
            <van-icon name="chat-o"  class="icc"/>
            <van-icon name="setting-o"  class="icc"/>
        </div>
        <div class="yhbox1">
            <div class="imgs"><img src="//static.asus.com.cn/static/wap/newPages/images/avatar.png" alt=""></div>
            <div class="deng"><span>登录/注册</span><img src="//static.asus.com.cn/static/wap/newPages/images/arrow1.png" alt=""></div>
            <div class="qian"><img src="//static.asus.com.cn/static/wap/newPages/images/icon4.png" alt=""><span class="qq">签到</span></div>
        </div>
        <div class="kaji">
            <div class="kajidiv">
                <p class="pp">--</p>
                <p>卡券</p>
            </div>
            <div class="kajidiv">
                <p class="pp">--</p>
                <p>积分</p>
            </div>
        </div>
        <div class="huiyuan">
            <img src="//static.asus.com.cn/static/wap/newPages/images/member.png" alt="">
            <p>注册领888礼包及2000积分</p>
        </div>
        <div class="yhbuttom">
            <div class="dd">
            <div class="dingd">
                <div>我的订单</div>
                <div><span>全部订单</span><img src="//static.asus.com.cn/static/wap/newPages/images/arrow1.png" alt=""></div>
            </div>
            <div>
                <van-grid :column-num="5">
                    <van-grid-item v-for="(v,index) in dingdan" :key="index" :icon="v.urls" :text="v.p" />
                </van-grid>
            </div>
        </div>
        <div>
            <van-swipe class="my-swipe lb" :autoplay="3000" indicator-color="white">
                <van-swipe-item><img src="https://static.asus.com.cn/store/20230201/15391955524952.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="https://static.asus.com.cn/store/20230202/14235054524951.png" alt=""></van-swipe-item>
                <van-swipe-item><img src="https://static.asus.com.cn/store/20230202/11222549101515.jpg" alt=""></van-swipe-item>
                <van-swipe-item><img src="https://static.asus.com.cn/store/20230120/09532452525550.jpg" alt=""></van-swipe-item>
            </van-swipe>
        </div>
        <div class="fws">
            <div class="wdfw">我的服务</div>
            <div>
                <van-grid :column-num="4">
                    <van-grid-item v-for="(v,index) in fuwu" :key="index" :icon="v.urls" :text="v.p" />
                </van-grid>
            </div>
        </div>
        <div class="yhbt">
            <div class="dingd">
                <div>积分兑换</div>
                <div @click="gengduo"><span>更多</span><img src="//static.asus.com.cn/static/wap/newPages/images/arrow1.png" alt=""></div>
            </div>
            <div class="jifeng">
                <div v-for="(v,index) in jifen" :key="index">
                    <img :src="v.url" alt="">
                    <p class="pvpp">{{ v.pp }}</p>
                    <p class="pvpp1">{{ v.pp1 }}</p>
                </div>
            </div>
        </div>
        </div>
    </div>
    <buttom></buttom>
  </div>
</template>

<script>
import buttom from './zujian/buttom.vue'
export default {
    methods:{
        gengduo(){
            this.$router.push("/jifen").catch(err=>err)
        }
    },
    components:{
        buttom
    },
    data(){
        return{
            jifen:[
                {
                    url:"http://static.asus.com.cn/store/album/images/PJWNOM6YX7W8FF/16544553100101.jpg",
                    pp:"ROG玩家国度 ZOOM CAT7万兆七类电竞网线1.5M",
                    pp1:"1888积分+139.00元"
                },
                {
                    url:"http://static.asus.com.cn/store/album/images/G57999B740D50D/16050549484997.jpg",
                    pp:"WT425无线鼠标 轻音鼠标 办公鼠标 人体工学鼠标游戏鼠标 USB鼠标",
                    pp1:"688积分+49.00元"
                },
                {
                    url:"http://static.asus.com.cn/store/album/images/KZ1N769ESQH7J4/17055854545699.jpg",
                    pp:"UX300 PRO有线家用办公游戏静音USB鼠标笔记本台式机通用鼠标 黑色",
                    pp1:"688积分+29.00元"
                },
            ],
            dingdan:[
                {
                    urls:"//static.asus.com.cn/static/wap/newPages/images/icon6.png",
                    p:"待付款"
                },
                {
                    urls:"//static.asus.com.cn/static/wap/newPages/images/icon7.png",
                    p:"待发货"
                },
                {
                    urls:"//static.asus.com.cn/static/wap/newPages/images/icon8.png",
                    p:"已发货"
                },
                {
                    urls:"//static.asus.com.cn/static/wap/newPages/images/icon9.png",
                    p:"待评价"
                },
                {
                    urls:"//static.asus.com.cn/static/wap/newPages/images/icon10.png",
                    p:"退货/售后"
                }
            ],
            fuwu:[
                {
                   urls:"https://static.asus.com.cn/store/20220727/15230899535099.png",
                   p:"我的收藏" 
                },
                {
                   urls:"https://static.asus.com.cn/store/20220727/15234110049524.png",
                   p:"我的预约" 
                },
                {
                   urls:"https://static.asus.com.cn/store/20220727/15242153561021.png",
                   p:"我的活动" 
                },
                {
                   urls:"https://static.asus.com.cn/store/20220727/15245897545452.png",
                   p:"网点查询" 
                },
                {
                   urls:"https://static.asus.com.cn/store/20220727/16285757985657.png",
                   p:"A码兑换" 
                }
            ]
        }
    }
}
</script>

<style scoped>
.pvpp{
    width: 30vw;
    height: 6vw;
    font-size: 4vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pvpp1{
    font-size: 3vw;
    text-align: center;
}
.jifeng{
    display: flex;
    width: 30vw;
    margin-left: 1.5vw;
}
.jifeng img{
    width: 30vw;
}
.yhbt{
    width: 94vw;
    height: 50vw;
    margin: 3vw 3vw 13vw 3vw;
    background-color: #fff;
    border-radius: 10px;
}
.qian{
    background-color: rgba(225, 131, 131, 0.928);
    width: 22vw;
    height: 9vw;
    margin: 5vw 5vw 5vw 5vw;
    border-radius: 50px;
    display: flex;
    color: #fff;
}
.qian img{
    width: 7vw;
    margin: 1vw 1vw 1vw 2vw;
}
.qq{
    line-height: 9vw;
}
.deng{
    flex-grow: 2;
    line-height: 18vw;
}
.deng img{
    width: 4vw;
}
.pp{
    height: 11vw;
    line-height: 11vw;
}
.imgs{
    margin: 3vw 5vw 3vw 5vw;
}
.imgs img{
    width: 15vw;
}
.yhbox{
    background-color:#0000ff2c;
    margin-bottom: 25vw;
}
.yonghutop{
    width: 100vw;
    height: 12vw;
    font-size: 6vw;
    line-height: 12vw;
    text-align: right;

}
.icc{
    margin-right: 4vw;
}
.yhbox1{
    display: flex;
    height: 20vw;
}
.yhbuttom{
    background-color: #f7f7f7;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.kaji{
    display: flex;
}
.dingd{
    display: flex;
    height: 10vw;
    line-height: 10vw;
    font-size: 4vw;
    justify-content: space-between;
    padding: 0 3vw;
    
}
.dingd img{
    width: 4vw;
    height: 4vw;
}
.dd{
    background-color: #fff;
    width: 94vw;
    margin:0 3vw 3vw 3vw;
}
.fws{
    background-color: #fff;
    width: 94vw;
    margin: 3vw;
    border-radius: 15px;
}
.wdfw{
    height: 10vw;
    line-height: 10vw;
    padding-left: 3vw;
    font-size: 4vw;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  }
  .lb{
    width: 94vw;
    height: 30vw;
    margin: 3vw;
  }
  .lb{
    width: 94vw;
    height: 23vw;
    margin: 3vw;
    border-radius: 6px;
  }
  .lb img{
    width: 94vw;
  }
  .huiyuan{
    background-color: #2152b5;
    width: 86vw;
    height: 15vw;
    margin-left: 3vw;
    font-size: 2vw;
    color: #fff;
    padding: 2vw 4vw;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .huiyuan img{
    width: 30vw;
    
  }
  .kajidiv{
    width: 50vw;
    height: 20vw;
    text-align: center;
  }
</style>